M

MLOG

Čeština

Ovládněte CSS container queries pro skutečně responzivní web design. Naučte se přizpůsobovat rozvržení na základě velikosti kontejneru, nejen viewportu, pro bezproblémový uživatelský zážitek na všech zařízeních.

Odemykání responzivního designu: Komplexní průvodce CSS Container Queries

Po léta se responzivní web design spoléhal především na media queries, které umožňovaly webovým stránkám přizpůsobit své rozvržení a stylování na základě šířky a výšky viewportu. Ačkoliv je tento přístup efektivní, někdy může působit omezujícím dojmem, zejména při práci se složitými komponentami, které se potřebují přizpůsobit nezávisle na celkové velikosti obrazovky. Přicházejí CSS Container Queries – mocný nový nástroj, který umožňuje prvkům reagovat na velikost jejich obsahujícího prvku, nikoliv na samotný viewport. To odemyká novou úroveň flexibility a přesnosti v responzivním designu.

Co jsou CSS Container Queries?

CSS Container Queries jsou funkcí CSS, která umožňuje aplikovat styly na prvek na základě velikosti nebo jiných charakteristik jeho nadřazeného kontejneru. Na rozdíl od media queries, které cílí na viewport, container queries cílí na konkrétní prvek. To umožňuje vytvářet komponenty, které přizpůsobují svůj styl dostupnému prostoru uvnitř svého kontejneru bez ohledu na velikost obrazovky.

Představte si komponentu karty, která se zobrazuje odlišně podle toho, zda je umístěna v úzkém postranním panelu nebo v široké hlavní obsahové oblasti. S media queries byste možná museli upravit styl karty na základě velikosti obrazovky, což by mohlo vést k nekonzistencím. S container queries můžete definovat styly, které se použijí specificky, když kontejner karty dosáhne určité šířky, a zajistit tak konzistentní a responzivní zážitek v různých rozvrženích.

Proč používat Container Queries?

Container queries nabízejí několik výhod oproti tradičním media queries:

Jak implementovat CSS Container Queries

Implementace CSS container queries zahrnuje dva klíčové kroky: definování kontejneru a psaní dotazů.

1. Definování kontejneru

Nejprve musíte určit prvek jako *kontejner*. To se provádí pomocí vlastnosti container-type. Existují dvě hlavní hodnoty pro container-type:

Můžete také použít container-name k pojmenování vašeho kontejneru, což může být užitečné pro cílení na konkrétní kontejnery ve vašich dotazech. Například:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Tento kód deklaruje prvek s třídou .card-container jako kontejner. Specifikujeme inline-size, abychom umožnili dotazy založené na šířce kontejneru. Také jsme mu dali jméno cardContainer.

2. Psaní container queries

Jakmile máte definovaný kontejner, můžete psát container queries pomocí pravidla @container. Syntaxe je podobná media queries:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Tento dotaz aplikuje styly uvnitř složených závorek pouze tehdy, když kontejner s názvem cardContainer má minimální šířku 400px. Cílí na prvek .card (pravděpodobně potomek .card-container) a upravuje jeho rozvržení. Pokud je kontejner užší než 400px, tyto styly se nepoužijí.

Zkratka: Můžete také použít zkrácenou verzi pravidla @container, když nepotřebujete specifikovat název kontejneru:

@container (min-width: 400px) {
  /* Styly, které se použijí, když je kontejner široký alespoň 400px */
}

Praktické příklady Container Queries

Podívejme se na některé praktické příklady, jak můžete použít container queries k vytvoření responzivnějších a přizpůsobivějších rozvržení.

Příklad 1: Komponenta karty

Tento příklad ukazuje, jak přizpůsobit komponentu karty na základě šířky jejího kontejneru. Karta zobrazí svůj obsah v jednom sloupci, když je kontejner úzký, a ve dvou sloupcích, když je kontejner širší.

HTML:


  

    Card Image
    

      
Card Title

      
This is some sample content for the card.

      Learn More

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

V tomto příkladu je .card-container deklarován jako kontejner. Když je šířka kontejneru menší než 500px, .card použije sloupcové rozvržení a naskládá obrázek a obsah vertikálně. Když je šířka kontejneru 500px nebo více, .card se přepne na řádkové rozvržení a zobrazí obrázek a obsah vedle sebe.

Příklad 2: Navigační menu

Tento příklad demonstruje, jak přizpůsobit navigační menu na základě dostupného prostoru. Když je kontejner úzký, položky menu se zobrazí v rozbalovacím seznamu. Když je kontejner širší, položky menu se zobrazí horizontálně.

HTML:

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

V tomto příkladu je .nav-container deklarován jako kontejner. Když je šířka kontejneru menší než 600px, položky menu se zobrazí jako vertikální seznam. Když je šířka kontejneru 600px nebo více, položky menu se zobrazí horizontálně pomocí flexboxu.

Příklad 3: Výpis produktů

Výpis produktů v e-shopu může přizpůsobit své rozvržení na základě šířky kontejneru. V menších kontejnerech může dobře fungovat jednoduchý seznam s obrázkem produktu, názvem a cenou. Jak kontejner roste, mohou být přidány další informace, jako je krátký popis nebo hodnocení zákazníků, aby se vylepšila prezentace. To také umožňuje jemnější kontrolu než cílení pouze na viewport.

HTML:


  

    Product 1
    
Product Name 1

    
$19.99

  

  

    Product 2
    
Product Name 2

    
$24.99

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Tento CSS kód nejprve ustanoví `product-listing-container` jako kontejner. Pro úzké kontejnery (méně než 400px) zabírá každá položka produktu 100 % šířky. Jakmile kontejner přesáhne 400px, položky produktu se uspořádají do dvou sloupců. Nad 768px se položky produktu zobrazí ve třech sloupcích.

Podpora v prohlížečích a polyfilly

Container queries mají dobrou podporu v moderních prohlížečích, včetně Chrome, Firefox, Safari a Edge. Starší prohlížeče je však nemusí nativně podporovat.

Pro podporu starších prohlížečů můžete použít polyfill. Populární volbou je container-query-polyfill, který lze najít na npm a GitHubu. Polyfilly vyplňují mezeru pro nepodporované funkce a umožňují vám používat container queries i ve starších prohlížečích.

Doporučené postupy pro používání Container Queries

Zde jsou některé doporučené postupy, které je dobré mít na paměti při používání container queries:

Běžné nástrahy a jak se jim vyhnout

Container Queries vs. Media Queries: Výběr správného nástroje

Ačkoliv container queries nabízejí významné výhody, media queries mají stále své místo v responzivním designu. Zde je srovnání, které vám pomůže rozhodnout, který nástroj je pro různé situace nejlepší:

Vlastnost Container Queries Media Queries
Cíl Velikost kontejneru Velikost viewportu
Responzivita Založená na komponentách Založená na stránce
Flexibilita Vysoká Střední
Duplikace kódu Nižší Vyšší
Případy použití Znovupoužitelné komponenty, komplexní rozvržení Globální úpravy rozvržení, základní responzivita

Obecně platí, že container queries používejte, když potřebujete přizpůsobit styl komponenty na základě velikosti jejího kontejneru, a media queries používejte, když potřebujete provést globální úpravy rozvržení na základě velikosti viewportu. Často je nejlepším přístupem kombinace obou technik.

Budoucnost responzivního designu s Container Queries

Container queries představují významný krok vpřed v responzivním designu, nabízejí větší flexibilitu a kontrolu nad tím, jak se prvky přizpůsobují různým kontextům. S pokračujícím zlepšováním podpory v prohlížečích se container queries pravděpodobně stanou stále důležitějším nástrojem pro webové vývojáře. Umožňují designérům a vývojářům vytvářet skutečně adaptivní a uživatelsky přívětivé webové stránky, které poskytují bezproblémový zážitek na všech zařízeních a velikostech obrazovky.

Závěr

CSS Container Queries jsou mocným doplňkem sady nástrojů pro responzivní design. Tím, že umožňují prvkům reagovat na velikost jejich obsahujícího prvku, umožňují skutečnou responzivitu založenou na komponentách a odemykají nové úrovně flexibility a přesnosti ve webovém designu. Porozuměním tomu, jak efektivně implementovat a používat container queries, můžete vytvářet přizpůsobivější, udržovatelnější a uživatelsky přívětivější webové stránky, které poskytují lepší zážitek pro všechny.

Zdroje

Odemykání responzivního designu: Komplexní průvodce CSS Container Queries | MLOG